/*
  basic-img-text.css (image and text in a single widge)
*/

/******************************************
 Widget (Image left, text right)
--------------------------------------- **/
div.img-left-txt-right {

}

/******************************************
 Widget (Image float right, text left)

<div class="img-right-txt-left">
  <img src="../common/img/smiley.jpg" width="80" /><br />
  CSS is fun!
  <p>
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
  </p>
  <p>
    In the paragraph above, the div element is 120 pixels wide and it contains the image.
    The div element will float to the right.
    Margins are added to the div to push the text away from the div.
    Borders and padding are added to the div to frame in the picture and the caption.
  </p>
</div>

-------------------------------------------- **/
div.img-right-txt-left-wrap img
{
  float:right;
  width:160;
  margin:0 0 15px 20px;
  padding:15px;
  border:1px solid black;
  text-align:center;
  display: block;
}

/******************************************
 Widget (Image top, text bottom)
--------------------------------------- **/
div.img-top-txt-bottom {}

/******************************************
 Widget (Image bottom, text top)
--------------------------------------- **/
div.img-bottom-txt-top {}

/******************************************
 Widget (Image float left, text right)
--------------------------------------- **/
div.img-float-left-txt-right {}


div.img-float-left-txt-right div.img {
  float: left;
  margin-right: 5px;
}

/******************************************
 Widget (Image float right, text left)
--------------------------------------- **/
div.img-float-right-txt-left {}


